
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Input Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f2f2f2;
        }
        .container {
            display: flex;
            width: 80%;
            max-width: 800px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        .left-side {
            flex: 1;
            padding: 20px;
        }
        .right-side {
            flex: 1;
            background-color: #f7f7f7;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;

        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .form-group button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .form-group button:hover {
            background-color: #45a049;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .center-form {
            width: 300px; /* Adjust the width as needed */
        }
    </style>
</head>

    <body>
    <div class="container" style="margin: 0 auto">
        <form action="Register.php" method="post" class="center-form">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="phone">手机号:</label>
                <input type="tel" id="phone" name="phone" required>
            </div>
            <div class="form-group">
                <label for="gender">性别:</label>
                <select id="gender" name="gender" required>
                    <option value="2" selected>未知</option>
                    <option value="1">男</option>
                    <option value="0">女</option>

                </select>
            </div>
            <div class="form-group" style="display: flex; justify-content: space-around">
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </div>
        </form>
    </div>

    <div class="right-side">
        <h2>Search Users</h2>
        <form action="Index.php" method="get">
            <div class="form-group" >
                <label for="search">请输入手机号或者用户名:</label>
                <div class="form-group">
                    <label for="searchType">选择查询类型:</label>
                    <select id="searchType" name="searchType">
                        <option value="phone" >手机号</option>
                        <option value="username">用户名</option>
                    </select>
                </div>
                <input type="text" id="search" name="search">
                <button type="submit" style="margin-top:10px;">GO</button>
            </div>
        </form>
        <div class="user-list">
            <h2>User List</h2>
            <table>
                <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>手机号</th>
                    <th>性别</th>
                    <th>添加时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <!-- 这里使用 PHP 输出用户信息，根据实际情况修改 -->
                <tbody>
                <?php require_once "Search.php"?>
                </tbody>

            </table>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function deleteUser(userId) {
            if (confirm('确定要删除吗？')) {
                $.ajax({
                    type: 'POST',
                    url: './DeleteUser.php', // Replace 'delete_user.php' with your actual PHP file handling deletion
                    data: { userId: userId },
                    success: function(response) {
                        // Handle the success response, such as updating the UI or reloading the page

                        alert("删除成功");
                        location.reload(); // Reload the page to reflect the updated data
                    },
                    error: function(xhr, status, error) {

                    }
                });
            }
        }
    </script>

</body>
</html>

